<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
    <title>订单详情</title>
    <link rel="stylesheet" type="text/css" href="../css/public-head.css" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <style>
        body,
        html {
            background-color: #eeeeee;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .tu_2 {
            width: 0.53rem;
            height: 0.613rem;
            margin-right: 0.16rem;
        }

        .tu_2>img {
            width: 100%;
            height: 100%;
        }

        .tu_2>div {
            width: 0.29rem;
            height: 0.29rem;
            border-radius: 50%;
            background-color: #E60012;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: 4.35rem;
            margin-top: -0.27rem;
        }

        .tu_2>div>span {
            font-size: 9px;
            color: #FFFFFF;
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -0.32rem;
            margin-left: -0.05rem;
        }
        /*头部结束*/

        .user_msg {
            background-color: #ffffff;
            margin-top: .13rem;
        }

        .user_msg>div {
            width: 100%;
            padding-top: .4rem;
            padding-left: .4rem;
        }

        .user_msg>div:nth-child(1)>div:nth-child(1) {
            color: #080808;
            font-size: 15px;
            font-weight: bold;
            float: left;
        }

        .user_msg>div:nth-child(1)>div:nth-child(2) {
            color: #1B1B1B;
            font-size: 15px;
            font-weight: bold;
            float: left;
            margin-left: .4rem;
        }

        .user_msg>div:nth-child(1)>div:nth-child(3) {
            color: #1B1B1B;
            font-size: 15px;
            font-weight: bold;
            float: left;
            margin-left: 1rem;
        }

        .user_msg>div:nth-child(2) {
            display: flex;
            padding-left: .4rem;
            padding-right: .15rem;
        }

        .user_msg>div:nth-child(2)>div:nth-child(1) {
            flex: 2.3;
        }

        .user_msg>div:nth-child(2)>div:nth-child(2) {
            flex: 7;
        }

        .user_msg>div:nth-child(2)>div:nth-child(3) {
            flex: 0.7;
            justify-content: flex-end;
            /*不受影响？*/
            align-items: center;
        }
        /*按钮*/

        .user_msg>div:nth-child(2)>div:nth-child(1)>button {
            line-height: 0.1rem;
            padding: 0.2rem 0.15rem;
            border-radius: 0.2rem;
            font-size: 10px;
            color: white;
            text-align: center;
            border: none;
            outline: none;
        }

        .user_msg>div:nth-child(2)>div:nth-child(1)>button:nth-child(1) {
            background-color: #FF0000;
            margin-right: .1rem;
        }

        .user_msg>div:nth-child(2)>div:nth-child(1)>button:nth-child(2) {
            background-color: #0A5AFA;
        }

        .user_msg>div:nth-child(2)>div:nth-child(2)>div {
            color: #080808;
            font-size: 13px;
            font-weight: 500;
            line-height: 0.53rem;
        }

        .user_msg>div:nth-child(2)>div:nth-child(3)>div {
            width: 0.213rem;
            height: 0.4rem;
            margin-top: 0.293rem;
            margin-left: 0.187rem;
        }

        .user_msg>div:nth-child(2)>div:nth-child(3)>div img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .user_msg>div:nth-child(3) {
            width: 100%;
        }

        .user_msg>div:nth-child(3)>div {
            height: 0.17rem;
            width: 100%;
            background-image: url(../image/icon/taiw@2x.png);
            background-size: contain;
        }
        /*选择服务*/

        .service {
            padding: 0.27rem 0.4rem;
            background-color: white;
            margin-top: 0.14rem;
        }

        .service>div:nth-child(1) {
            color: #626262;
            font-size: 15px;
            font-weight: 500;
            line-height: 0.53rem;
        }

        .service>div:nth-child(2) {
            margin-top: 0.66rem;
        }

        .service>div:nth-child(2)>div>div:nth-child(1) {
            flex: 5;
            width: 100%;
        }

        .service>div:nth-child(2)>div>div:nth-child(2) {
            flex: 5;
            width: 100%;
        }

        .service>div:nth-child(3) {
            color: #FF0000;
            font-size: 13px;
            text-align: center;
            margin-top: 0.68rem;
        }

        .service-block {
            text-align: center;
        }

        .service-block-btn {
            display: inline-block;
            width: 3.93rem;
            background-color: #C9C9C9;
            color: white;
            border-radius: 0.173rem;
            margin: 0.08rem 2%;
            line-height: 50px;
            font-size: 16px;
            font-weight: 500;
        }

        .service-action {
            background-color: #0A5AFA;
            color: white;
        }
        /*服务方式*/

        .mode {
            /*padding:0.27rem 0rem;*/
            /*左右0.4rem*/
            background-color: white;
            margin-top: 0.14rem;
        }

        .mui-table-view:before,
        .mui-table-view-cell:after,
        .mui-table-view:after {
            background-color: transparent;
        }

        .mui-navigate-right {
            background-color: white;
            font-size: 15px;
            font-weight: 500;
        }

        .mui-table-view>.mui-table-view-cell.mui-collapse>.mui-active,
        .mui-table-view>.mui-table-view-cell.mui-collapse.mui-active>.mui-active.mui-navigate-right {
            background-color: white;
        }
        /*右边按钮下拉*/

        .mui-table-view-cell.mui-collapse>a {
            display: flex;
        }

        .mui-table-view-cell.mui-collapse>a>span {
            flex: 5;
            display: flex;
            align-items: center;
        }

        .mui-table-view-cell.mui-collapse>a>span:nth-child(2) {
            justify-content: flex-end;
        }

        .mui-icon.mui-icon-arrowdown {
            font-size: 18px;
            float: right;
        }

        .con {
            padding: 0.306rem 0.413rem;
            background-color: white;
            display: flex;
        }

        .con>div:nth-child(1) {
            flex: 7;
        }

        .con>div:nth-child(2) {
            flex: 3;
        }

        .con-left-top>div:nth-child(1) {
            align-items: center;
            float: left;
        }

        .con-left-top>div:nth-child(1)>div {
            width: .733rem;
            height: .733rem;
            margin-right: .253rem;
            margin-top: 0.15rem;
        }

        .con-left-top>div:nth-child(1)>div img {
            width: 100%;
            height: 100%;
        }
        /*优惠券*/

        .coupon {
            margin-top: 0.133rem;
        }
        /*支付方式*/

        .method {
            margin-top: 0.133rem;
        }
        /*提示*/

        .tips {
            text-align: center;
            color: #626262;
            font-size: 15px;
            padding: 0.4rem 0;
            font-weight: 500;
            line-height: 0.53rem;
        }
        /*底部支付部分*/

        .total {
            display: flex;
            align-items: center;
            height: 1.293rem;
        }

        .total-left {
            flex: 7;
            background-color: white;
            padding: 0.4rem 0 0.4rem 0.4rem;
            height: 1.293rem;
        }

        .total-right {
            flex: 3;
            background-color: #FF0000;
            height: 1.293rem;
        }

        .total-left>div {
            color: #1B1B1B;
            font-size: 17px;
        }

        .total-left>div>span {
            color: #FF0000;
            font-size: 24px;
        }

        .total-right>div {
            color: #FFFFFF;
            font-size: 15px;
            text-align: center;
            line-height: 0.4rem;
            padding: 0.52rem 0;
        }
        /*服务方式*/

        .mui-table-view {
            background-color: white;
        }

        .mode-1 {
            color: #626262;
            font-size: 15px;
        }

        .mode-2 {
            color: #1B1B1B;
            font-size: 14px;
        }

        .mui-icon.mui-icon-arrowdown {
            margin-left: .1rem;
        }

        .con-left-top>div:nth-child(1) {
            flex: 2;
        }

        .con-left-top>div:nth-child(2) {
            flex: 8;
            line-height: 0.52rem;
        }

        .con-left-top>div:nth-child(2)>div:nth-child(1) {
            color: #1B1B1B;
            font-size: 15px;
            font-weight: 500;
        }

        .con-left-top>div:nth-child(2)>div:nth-child(2) {
            color: #1B1B1B;
            font-size: 12px;
            font-weight: 500;
        }

        .con-left-top>div:nth-child(2)>div:nth-child(1) span {
            color: #A0A0A0;
            font-size: 15px;
            font-weight: 500;
        }

        .con-left-top>div:nth-child(2)>div:nth-child(2) img {
            width: 0.24rem;
            height: 0.28rem;
            display: inline-block;
            margin-right: 0.133rem;
            margin-left: 0.133rem;
        }

        .con-left-bottom {
            margin-top: 0.253rem;
        }

        .con-left-bottom>span {
            padding: 0.06rem 0.2rem;
            border: 1px solid #0A5AFA;
            border-radius: 0.13rem;
            color: #0A5AFA;
        }

        .con-right>div {
            width: 2.546rem;
            height: 2rem;
            float: right;
        }

        .con-right>div img {
            width: 100%;
            height: 100%;
        }

        .coupon-1 {
            color: #626262;
            font-size: 15px;
        }

        .coupon-2 {
            color: #1B1B1B;
            font-size: 14px;
        }

        .mode-2 img {
            width: 0.386rem;
            height: 0.226rem;
            margin-left: 9px;
        }

        .coupon-2 img {
            width: 0.386rem;
            height: 0.226rem;
            margin-left: 9px;
        }
    </style>
</head>

<body>

    <div class="main">
        <!--用户信息-->
        <div class="user_msg">
            <div>
                <div>张先生</div>
                <div>187****8006</div>
                <div>车牌：桂A·75N17</div>
            </div>
            <div>
                <div>
                    <button>默认</button>
                    <button>公司</button>
                </div>
                <div>
                    <div>青秀区-建政街道-青秀万达银座负二楼A区06号车位</div>
                </div>
                <div>
                    <div><img src="../image/icon/ARROWRIGHT@2x.png" alt="" /></div>
                </div>
            </div>
            <div style="padding-left: 0;">
                <!--满铺图片-->
                <div></div>
            </div>
        </div>

        <!--选择服务-->
        <div class="service">
            <div>选择服务</div>
            <div class="service-block">
                <div class="service-block-btn service-action">
                    <span>精致打蜡</span>
                </div>
                <div class="service-block-btn">
                    <span>深度抛光</span>
                </div>
                <div class="service-block-btn">
                    <span>镀 金</span>
                </div>
                <div class="service-block-btn">
                    <span>车 衣</span>
                </div>
                <div class="service-block-btn">
                    <span>内室消毒</span>
                </div>
                <div class="service-block-btn">
                    <span>内室清洁</span>
                </div>
                <div class="service-block-btn">
                    <span>皮革养护</span>
                </div>
                <div class="service-block-btn">
                    <span>代安装</span>
                </div>
            </div>
            <div>服务流程/时长：约1~2小时</div>
        </div>
        <!--服务方式-->
        <div class="mode">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-collapse">
                    <a href="#">
                        <span class="mode-1">服务方式</span>
                        <span class="mode-2">自行到店<img src="../image/icon/ARROWRIGHTk5@2x.png" alt="" /></span>
                    </a>
                    <div class="mui-collapse-content">
                        <p>面板1子内容</p>
                    </div>
                </li>
            </ul>
            <!--内容填充部分-->
            <div class="con">
                <div class="con-left">
                    <div class="con-left-top">
                        <div>
                            <div><img src="../image/icon/yjdh@2x.png" alt="" /></div>
                        </div>
                        <div>
                            <div><span>离我最近：</span>万达金座停车场负二楼门店</div>
                            <div>0.58km |<img src="../image/icon/dingw@2x.png" alt="" />青秀区-东葛路116号</div>
                        </div>
                    </div>
                    <div class="con-left-bottom">
                        <span>1人正在排队</span>
                    </div>
                </div>
                <div class="con-right">
                    <div><img src="../image/icon/mendian@2x.png" alt="" /></div>
                </div>
            </div>
        </div>
        <!--优惠券-->
        <div class="coupon">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-collapse">
                    <a href="#">
                        <span class="coupon-1">优惠券</span>
                        <span class="coupon-2">￥0<img src="../image/icon/ARROWRIGHTk5@2x.png" alt="" /></span>
                    </a>
                    <div class="mui-collapse-content">
                        <p>面板1子内容</p>
                    </div>
                </li>
            </ul>
        </div>
        <!--支付方式-->
        <div class="method">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-collapse">
                    <a href="#">
                        <span class="coupon-1">支付方式</span>
                        <span class="coupon-2">在线支付<img src="../image/icon/ARROWRIGHTk5@2x.png" alt="" /></span>
                    </a>
                    <div class="mui-collapse-content">
                        <p>面板1子内容</p>
                    </div>
                </li>
            </ul>
        </div>
        <!--提示-->
        <div class="tips">现在下单预计19:50分完成服务</div>
        <!--底部合计支付部分-->
        <div class="total">
            <div class="total-left">
                <div>合计:<span>￥199.00</span></div>
            </div>
            <div class="total-right">
                <div>确认支付</div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript">
    headInner({
            title: "订单详情",
            //headleft
            headl: '<a href="javascript:history.back(-1)" style="color:white" class="mui-icon mui-icon-left-nav"></a>',
            //headright
            headr: '<div class="tu_2"><img src="../image/icon/xx-bs@2x.png" alt="" /><div><span>2</span></div></div>',
            color: "", //默认是蓝色
            padding: "0px 0px 0px",
        })
        //按钮切换
    var service = document.querySelector('.service');
    var btn = service.getElementsByClassName("service-block-btn");
    for (var i = 0; btn.length > i; i++) {
        btn[i].addEventListener('click', function() {
            var clas = this.getAttribute("class");
            if (clas.indexOf("service-action") != -1) {
                this.setAttribute('class', 'service-block-btn');
            } else {
                this.setAttribute('class', "service-block-btn service-action");
            }
        })
    }
</script>

</html>
